<template>
  <view class="container">
    <my-navbar-top></my-navbar-top>
    <view class="order-detail" v-if="detail.id">
      <view class="box">
        <!-- 标题 -->
        <view class="title">订单详情</view>
        <!-- 物流信息 -->
        <view class="order-status">
          <view class="status-header">
            <view class="status-title">订单配送</view>
            <view class="status">{{ detail.status_name }}</view>
          </view>
          <view class="t2">
            收货地址：{{ address.province }}{{ address.city }}{{ address.area }}
            {{ address.address }}
          </view>
          <view class="t2"> 收货人：{{ address.realname }} </view>
          <view class="t2"> 联系电话：{{ address.telephone }} </view>

          <!-- 物流相关信息 -->
          <view
            class="logistics"
            v-if="detail.logistics"
            @click.stop="handleLogistics(detail)"
          >
            <view class="logistics-title">包裹</view>
            <view class="logistics-status">{{
              detail.logistics.data.logisticsStatusDesc
            }}</view>
            <view class="logistics-desc"
              >{{ detail.logistics.data.theLastMessage }}
            </view>
            <image src="/static/images/gray-right.png" mode="scaleToFill" />
          </view>
        </view>
        <!-- 订单商品 -->
        <view class="order-goods">
          <order-item
            v-for="(goods, gIx) in detail.pay_info"
            :key="gIx"
            :item="goods"
          ></order-item>
        </view>
        <!-- 订单金额 -->
        <view class="order-money">
          <view class="order-money-item">
            <view class="order-money-item-title">小计</view>
            <view class="order-money-item-price">￥{{ detail.price }}</view>
          </view>
          <view class="order-money-item">
            <view class="order-money-item-title">运费</view>
            <view class="order-money-item-price">￥0.00</view>
          </view>
          <view class="order-money-item">
            <view class="order-money-item-title">实付</view>
            <view
              class="order-money-item-price"
              style="font-size: 32rpx; font-weight: bold"
              >￥{{ detail.price }}</view
            >
          </view>
        </view>
        <!-- 订单其他信息 -->
        <view class="order-other">
          <view class="order-other-item">
            <view class="order-other-item-title">订单编号</view>
            <view class="order-other-item-value">{{ detail.erp_order_no }}</view>
          </view>
          <view class="order-other-item">
            <view class="order-other-item-title">下单时间</view>
            <view class="order-other-item-value">{{ detail.created_at }}</view>
          </view>
          <view class="order-other-item">
            <view class="order-other-item-title">支付方式</view>
            <view class="order-other-item-value">微信支付</view>
          </view>
          <view class="order-other-item">
            <view class="order-other-item-title">订单备注</view>
            <view class="order-other-item-value">{{
              detail.remark || '无'
            }}</view>
          </view>
        </view>
      </view>
      <view class="order-footer">
        <view class="buttons">
          <view
            class="button plain"
            v-if="[2].includes(detail.status)"
            @click.stop="handleCancelOrder(detail)"
            >取消订单</view
          >
          <view
            class="button"
            v-if="detail.status == 2"
            @click.stop="handlePay(detail)"
            >立即支付</view
          >
          <view
            class="button plain"
            v-if="[3, 4, 5].includes(detail.status) && detail.is_invoice != 1"
            @click.stop="handleApplyInvoice(detail)"
            >申请开票
          </view>
        </view>
      </view>
    </view>
	<!-- 库存不足 -->
	<stock-popup ref="stockPopup"></stock-popup>
	<!-- 限购弹框 需要传入文案 -->
	<stock-popup ref="limitPopup" text1="您已超过今日最大购买限额" text2="请理性消费" @close="limitClose"></stock-popup>
  </view>
</template>

<script>
import orderItem from '@/components/goods/orderItem.vue'
import stockPopup from '@/components/stockPopup.vue'
export default {
  name: 'About',
  components: {
    orderItem,
	stockPopup,
  },
  data() {
    return {
      order_id: '',
	  out_trade_no:'',
      detail: {},
      address: {
        realname: '',
        telephone: '',
        province: '',
        city: '',
        area: '',
        address: '',
      },
    }
  },
  onLoad(options) {
    this.out_trade_no = options.out_trade_no;
	console.log(options.out_trade_no);
    if (this.out_trade_no) {
      this.getOrderDetail()
    }
  },
  methods: {
    getOrderDetail() {
      this.$util.showLoading()
      this.$api.orderDetail({ out_trade_no: this.out_trade_no }).then((res) => {
        console.log(res)
        if (res.code == 0) {
          this.detail = res.data
          this.detail.pay_info = JSON.parse(this.detail.pay_info)
          this.address = res.data.user_address
        } else {
          this.$util.showText(res.msg)
          uni.navigateBack()
        }
      })
    },
    // 申请开票
    handleApplyInvoice(item) {
      uni.navigateTo({
        url: `/pages/order/invoice/index?order_id=${item.id}`,
      })
    },
    // 取消订单
    handleCancelOrder(item) {
      uni.showModal({
        title: '提示',
        content: '确定取消订单吗？',
        success: (res) => {
          if (res.confirm) {
            this.cancelOrder(item)
          }
        },
      })
    },
	limitClose() {
	  // 可以干一些事情
	},
    // 执行取消订单
    cancelOrder(item) {
      this.$api
        .orderCancel({
          order_id: item.id,
        })
        .then((res) => {
          console.log(res)
          if (res.code == 0) {
            uni.showToast({
              title: '取消成功',
              icon: 'success',
            })
            this.getOrderList(true)
          }
        })
    },
    // 继续支付
    handlePay(item) {
      console.log(item)
      this.$api
        .orderPay({
          order_id: item.id || '',
        })
        .then((res) => {
          if (res.code == 0) {
            // 发起支付
            this.pay(res.data)
            return
          } else if (res.code == -1) {
            this.$refs.stockPopup.openPopup()
		  } else if (res.code == -2) {
			  this.$refs.limitPopup.openPopup()
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
          }
        })
    },
    // 执行支付
    pay(data) {
      console.log(data)
      wx.requestPayment({
        timeStamp: data.timeStamp,
        nonceStr: data.nonceStr,
        package: data.package,
        signType: data.signType,
        paySign: data.paySign,
        success: (res) => {
          console.log(res)
          if (res.errMsg == 'requestPayment:ok') {
            uni.showToast({
              title: '支付成功',
              icon: 'success',
            })
            uni.navigateTo({
              url:
                '/pages/settlement/status/index?status=success&order_id=' +
                data.order_id +
                '&order_no=' +
                data.order_no,
            })
          }
        },
        fail: (res) => {
          console.log(res, 'fail')
          if (res.errMsg == 'requestPayment:fail cancel') {
            uni.showToast({
              title: '支付取消',
              icon: 'none',
            })
            setTimeout(() => {
              uni.navigateTo({
                url:
                  '/pages/settlement/status/index?status=fail&order_id=' +
                  data.order_id +
                  '&order_no=' +
                  data.order_no,
              })
            }, 500)
          }
        },
      })
    },
    handleLogistics(item) {
      uni.navigateTo({
        url: `/pages/order/logistics/index?order_id=${item.id}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
